<template>
  <div class="flh_datakb">
    <div class="mainView">
      <mainTitle :hideLogo="false">
        <span slot="title" class="title">交易数据看板</span>
      </mainTitle>
      <color-row-tab :lineStyle="'width:12px;height:75px'" :tabNameStyle="'font-size:22px'" :tabNumStyle="'font-size:44px;line-height:70px'" class="colorRowTab" v-model="titleArr"></color-row-tab>
      <div class="line"></div>
      <div class="hot">
        <div class="top">成交热度</div>
        <div class="mid">
          <img src="/static/img/flh/news/map.svg" />
          <div class="midItem">
            <div class="laochengList">
              <div class="titleTxt">老城区</div>
              <div class="item">
                <img src="/static/img/flh/news/chengjiao@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[2] ? mapData[2].turnover : 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
              <div class="item">
                <img src="/static/img/flh/news/yongjin@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[2] ? mapData[2].achievement : 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
            </div>
            <div class="laochengList xigong">
              <div class="titleTxt">西工区</div>
              <div class="item">
                <img src="/static/img/flh/news/chengjiao@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[4] ? mapData[4].turnover : 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
              <div class="item">
                <img src="/static/img/flh/news/yongjin@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[4] ? mapData[4].achievement: 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
            </div>
            <div class="laochengList jianxi">
              <div class="titleTxt">涧西区</div>
              <div class="item">
                <img src="/static/img/flh/news/chengjiao@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[1] ? mapData[1].turnover : 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
              <div class="item">
                <img src="/static/img/flh/news/yongjin@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[1] ? mapData[1].achievement : 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
            </div>
            <div class="laochengList chanhe">
              <div class="titleTxt">瀍河区</div>
              <div class="item">
                <img src="/static/img/flh/news/chengjiao@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal=" mapData[0] ? mapData[0].turnover : 0" :decimals="decimals" :duration="duration" :options="options" />

                </span>
              </div>
              <div class="item">
                <img src="/static/img/flh/news/yongjin@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[0] ? mapData[0].achievement : 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
            </div>
            <div class="laochengList luolong">
              <div class="titleTxt">洛龙区</div>
              <div class="item">
                <img src="/static/img/flh/news/chengjiao@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[3] ? mapData[3].turnover : 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
              <div class="item">
                <img src="/static/img/flh/news/yongjin@2x.png" /><span>
                  <i-count-up :startVal="startVal" :endVal="mapData[3] ? mapData[3].achievement : 0" :decimals="decimals" :duration="duration" :options="options" />
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="bot">
          <img src="/static/img/flh/news/chengjiao@2x.png" /> <span>成交量</span> 
          <img src="/static/img/flh/news/yongjin@2x.png" /> <span>佣金额</span> 
        </div>
      </div>
      <div class="dealCon">
        <mainTitle :hideLogo="false">
          <span slot="title" class="title">成交排名TOP5</span>
        </mainTitle>
        <div class="rowCell">
          <div class="item">
            <div class="titleRow shopColor">
              <img src="/static/img/flh/news/mendian@2x.png" /> 门店排名
            </div>
            <div class="table">
              <div class="top"><span>门店</span><span>成交量</span><span>拥金额</span> </div>
              <div class="row" v-for="(item, id) in tableStroe" :key="id"><span>{{item.name}}</span><span>{{item.turnover || 0}}</span><span>{{item.achievement}}</span> </div>
            </div>
          </div>
          <div class="item">
            <div class="titleRow perColor">
              <img src="/static/img/flh/news/jingjiren@2x.png" /> 经纪人排名
            </div>
            <div class="table">
              <div class="topBlue"><span>经纪人</span><span>成交量</span><span>拥金额</span> </div>
              <div class="row blue" v-for="(itemP, idP) in tablePerson" :key="idP"><span>{{itemP.name}}</span><span>{{itemP.turnover || 0}}</span><span>{{itemP.achievement}}</span> </div>
            </div>
          </div>
        </div>
        <div class="dealTrend">
          <mainTitle :hideLogo="false">
            <span slot="title" class="title">成交趋势</span>
          </mainTitle>
          <line-chartss v-model="lineChartssData" :chartStyle="'width:900px;min-height:300px;'" :option="lineChartOption"></line-chartss>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import mainTitle from "@/components/flh/dataKanban/mainTitle";
import colorRowTab from "./components/colorRowTab";
import {
  GetDataByTargetForTwo,
  GetSumDataByCityDistrict,
  GetTurnoverRanking,
  GetDoubleDetailList
} from "@/api/flh/home";
export default {
  components: {
    mainTitle,
    colorRowTab
  },
  data() {
    return {
      titleArr: [],
      mapData: [],
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      tableStroe: [],
      tablePerson: [],
      lineChartssData: [],
      lineChartOption: {
        legendColor: "#fff",
        grid: {
          top: "10%",
          left: "5%",
          right: "10%",
          bottom: "25%"
        },
        hideLineColor: false,
        showSymbol: "none",
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(253,196,9,0.2)",
              shadowBlur: 10
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "rgba(85, 237, 167, 0.1)"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "black"
            }
          },
          axisLabel: {
            rotate: 0,
            inside: false,
            rich: {
              value: {
                color: "#fff"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: "#E5E5E5"
          }
        },
        color: ["#2BE851", "#1EC1FF", "#FDC409", "#8d4cfd"],
        startColor: [
          "rgba(43,232,81,0.5)",
          "rgba(30,193,255,0.5)",
          "rgba(253,196,9,0.5)",
          "rgba(141,76,253,0.5)",
          "rgba(30,193,255,0.5)",
          "rgba(253,196,9,0.5)"
        ],
        endColor: [
          "rgba(43,232,81,0.5)",
          "rgba(30,193,255,0.5)",
          "rgba(253,196,9,0.5)",
          "rgba(141,76,253,0.5)",
          "rgba(30,193,255,0.5)",
          "rgba(253,196,9,0.5)"
        ]
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.fetchTopData();
      this.fetchPieData();
      this.fetchStroeData();
      this.fetchPersonData();
      this.fetchLineData();
    },
    async fetchLineData() {
      var params = {
        queryType: "18005",
        timeType: "3010",
        timeAccuracy: "4003",
        cityId: 36001
      };
      var res = await GetDoubleDetailList(params);
      if (res.data.code === "0") {
        var lineChartssData = res.data.result;
        this.$set(this, "lineChartssData", lineChartssData);
      }
    },
    async fetchPersonData() {
      var params = {
        cityId: 36001,
        queryType: "19024",
        timeType: "3008"
      };
      var res = await GetTurnoverRanking(params);
      if (res.data.code === "0") {
        var tablePerson = res.data.result;
        this.$set(this, "tablePerson", tablePerson);
      }
    },
    async fetchStroeData() {
      var params = {
        cityId: 36001,
        queryType: "19023",
        timeType: "3008"
      };
      var res = await GetTurnoverRanking(params);
      if (res.data.code === "0") {
        var tableStroe = res.data.result;
        this.$set(this, "tableStroe", tableStroe);
      }
    },
    async fetchPieData() {
      var params = {
        cityId: 36001,
        timeType: "3008"
      };
      var res = await GetSumDataByCityDistrict(params);
      if (res.data.code === "0") {
        var mapData = res.data.result;
        this.$set(this, "mapData", mapData);
      }
    },
    async fetchTopData() {
      var params = {
        timeType: "3008",
        cityId: 36001,
        queryType: "18005"
      };
      var res = await GetDataByTargetForTwo(params);
      if (res.data.code === "0") {
        var result = res.data.result.list;
        var arr = [
          {
            dataArr: [
              {
                name: "二手房售房数",
                value: result[1].value
              },
              {
                name: "新房售房数",
                value: result[2].value
              }
            ],
            unit: ""
          },
          {
            dataArr: [
              {
                name: "租房数",
                value: result[0].value
              }
            ],
            unit: ""
          },
          {
            dataArr: [
              {
                name: "代办数",
                value: result[3].value
              }
            ],
            unit: ""
          }
        ];
        this.$set(this, "titleArr", arr);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../../styles/base/_parameters";
.colorRowTab {
  width: 40%;
  margin-top: 70px;
}

.flh_datakb {
  @include absoluteAllSides;
  overflow: hidden;
  .mainView {
    @include absoluteAllSides(40, 40, 40, 100);
    .title {
      font-size: 48px;
      font-weight: bold;
    }
    .line {
      height: 60px;
    }
    .hot {
      width: 40%;
      text-align: center;
      .top {
        font-size: 30px;
        color: #55eda7;
      }
      .bot {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-start;
        color: #fff;
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        img:nth-of-type(2) {
          margin-left: 20px;
        }
        span {
          color: #1ec1ff;
        }
        span:nth-of-type(2) {
          color: #fdc409;
        }
      }
      .mid {
        .midItem {
          position: absolute;
          right: 60%;
          top: 30%;
          bottom: 0;
          left: 0;
          .laochengList {
            position: absolute;
            left: 23%;
            top: 5.5%;
            text-align: left;
            @include din(24px);
            .titleTxt {
              color: #fff;
              font-size: 18px;
            }
            .item {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              line-height: 20px;
              span {
                margin-top: 8px;
                color: #fdc409;
              }
            }
            .item:nth-of-type(2) {
              span {
                color: #1ec1ff;
              }
            }
          }
          .xigong {
            top: 17%;
            left: 3%;
          }
          .jianxi {
            top: 37%;
            left: 1%;
          }
          .chanhe {
            top: 11%;
            left: 84%;
          }
          .luolong {
            top: 75.5%;
            left: 71%;
          }
          img {
            width: 20px;
            height: 20px;
            margin-right: 10px;
          }
          img:nth-of-type(2) {
            margin-left: 20px;
          }
        }
      }
    }
    .dealCon {
      position: absolute;
      left: 46%;
      top: 13%;
      right: 0;
      .title {
        font-size: 30px;
        font-weight: normal;
      }
      .rowCell {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .item {
          width: 100%;
          .titleRow {
            display: flex;
            align-items: center;
            font-size: 24px;
            margin-top: 35px;
            img {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }
          }
          .shopColor {
            color: #2be851;
          }
          .perColor {
            color: #1ec1ff;
          }
          .table {
            color: #fff;
            width: 349px;
            .top {
              display: flex;
              background: rgba(43, 232, 81, 0.1);
              color: #2be851;
              font-size: 20px;
              align-items: center;
              justify-content: space-around;
              padding: 8px 0;
              margin-top: 20px;
            }
            .topBlue {
              display: flex;
              background: rgba(30, 193, 255, 0.1);
              color: #1ec1ff;
              font-size: 20px;
              align-items: center;
              justify-content: space-around;
              padding: 8px 0;
              margin-top: 20px;
            }
            .row {
              display: flex;
              align-items: center;
              padding: 8px 0;
              font-size: 18px;
              flex: 1;
              margin-left: 27px;
              span {
                text-align: left;
              }
              span:nth-of-type(1) {
                width: 100px;
              }
              span:nth-of-type(2) {
                width: 116px;
              }
              span:nth-of-type(3) {
                width: 90px;
              }
            }
            .blue {
              span:nth-of-type(1) {
                width: 100px;
              }
              span:nth-of-type(2) {
                width: 98px;
              }
              span:nth-of-type(3) {
                width: 90px;
              }
            }
          }
        }
      }
    }
    .dealTrend {
      margin-top: 78px;
    }
    .subTitle {
      font-size: 30px;
      font-weight: normal;
    }
    .rightView {
      position: absolute;
      right: 300px;
      top: 200px;
      .title {
      }
    }
  }
}
</style>